<template>
  <Container class="brand-list">
    <div class="container-header" slot="header">
      <Form class="search">
        <Row>
          <Col span="6">
            <FormItem label="明细类型">
              <Select v-model="list.form.goldRecordTypeEnum" clearable @on-change="onSearchBtnClick">
                <Option v-for="item in list.options.type" :value="item.value" :key="item.value">{{item.label}}</Option>
              </Select>
            </FormItem>
            <FormItem label="联系手机">
              <Input 
                class="start"
                v-model.trim="list.form.storePhone"
                placeholder="联系手机"
                @on-enter="onSearchBtnClick">
              </Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="条码">
              <Input 
                class="start"
                v-model.trim="list.form.barCode"
                placeholder="条码"
                @on-enter="onSearchBtnClick">
              </Input>
            </FormItem>
            <FormItem label="时间">
              <DatePicker 
                v-model="list.form.date"
                format="yyyy-MM-dd" 
                type="daterange" 
                placement="bottom-start" 
                placeholder="选择日期"
                @on-enter="onSearchBtnClick"></DatePicker>
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="门店名称">
              <Input 
                class="start"
                v-model.trim="list.form.storeName"
                placeholder="门店名称"
                @on-enter="onSearchBtnClick">
              </Input>
            </FormItem>
            <FormItem label="单号">
              <Input 
                class="start"
                v-model.trim="list.form.orderSn"
                placeholder="单号"
                @on-enter="onSearchBtnClick">
              </Input>
            </FormItem>
          </Col>
          <Col span="5">
            <FormItem label="门店联系人">
              <Input 
                class="start"
                v-model.trim="list.form.storeLinkName"
                placeholder="门店联系人"
                @on-enter="onSearchBtnClick">
              </Input>
            </FormItem>
          </Col>
          <Col class-name="search" span="2">
            <Button class="btn-search large" type="primary" icon="ios-search" @click="onSearchBtnClick" :disabled="!searchRight"></Button>
          </Col>
        </Row>
      </Form>
    </div>
    <Tabs v-model="tab">
      <div class="item" slot="extra" v-if="totalCount">
        小计:共<span class="font-red">{{totalCount}}</span>条记录，云豆<span class="font-red">{{goldPlus}}</span>、<span class="font-red">{{goldMinus}}</span>合<span class="font-red">{{totalGold}}</span>
      </div>
      <export-btn @onExport="onExport" class="item" slot="extra" :disabled="!exportRight"></export-btn>
      <TabPane label="云豆明细" name="tab1">
        <Table
          :height="options.tableHeight"
          stripe
          :columns="list.columns"
          :data="list.data"
          no-data-text="亲，没有找到相关记录哦！~"
        ></Table>
        <div class="pager">
          <Page
            :total="list.totalItem"
            :current="list.currentPage"
            :page-size="list.pageSize"
            @on-change="onPageChange"
            @on-page-size-change="onPageSizeChange"
            show-sizer
            placement="top"
          ></Page>
        </div>
        <Loader :status="list.status" @refresh="getData"></Loader>
      </TabPane>
    </Tabs>
    <NumItem ref="numEdit" @complete="getData"></NumItem>
  </Container>
</template>
<script>
import table from '@/table'
import GoldListData from './list/GoldListData'
import { clearEmpty, formatDate } from '@/util'
import NumItem from './edit/NumItem'
import { mapGetters } from 'vuex'
export default {
  // name: 'sales/gold/list',
	components: {
		NumItem
	},
  data() {
    return {
      tab: 'tab1',
      list: GoldListData,
      options: {
        tableHeight: 300
      },
      goldPlus: '',
      goldMinus: '',
      totalGold: '',
      totalCount: '',
      exportRight: true, //导出权限
      searchRight: true, //搜索权限
      viewUrls: [
        { key: 'exportRight', url: '/sales/gold/record/export' },
        { key: 'searchRight', url: '/sales/gold/record/page' }
      ]
    }
  },
  computed: {
    ...mapGetters(['userMenu'])
  },
  created () {
    this.userMenu.forEach(item => {
      this.viewUrls.forEach(child => {
        if (item.viewUrl === child.url) {
          this[child.key] = item.hasRight
        }
      })
    })
  },
  mounted() {
    this.list.currentPage = ~~this.$route.query.currentPage || 1
    this.list.pageSize = ~~this.$route.query.pageSize || this.list.pageSize
    this.initTable()
    this.$bus.$on('onNum', ({ item }) => this.onNum(item))
    this.onSearchBtnClick()
    
  },
  destroyed() {
    this.$bus.$off()
  },
  methods: {
    ...table,
    onSearchBtnClick() {
      this.list.currentPage = 1
      if (this.list.form.date[0] == '' && this.list.form.date[1] == '') {
        this.$Notice.warning({
          title: '请选择时间后再搜索'
        })
        return false
      }
      this.getData()
    },
    getData() {
      if (!this.searchRight) return
      this.list.status = 'loading'
      let v = this.formatParam();
      if (!v) return
      let param = {
        ...this.formatParam(),
        current: this.list.currentPage,
        size: this.list.pageSize
      }
      this.$ajaxGet('/gold/record/es_page', param).then(data => {
        this.list.data = []
        this.list.totalItem = Number(data.total)
        this.list.data = (data.records || []).map(item => {
          return {
            id: item.id,
            recordDate: item.recordDate,
            goldRecordTypeEnum: item.goldRecordTypeEnum ? item.goldRecordTypeEnum : '-',
            storeName: item.storeName ? item.storeName : '-',
            storeLinkName: item.storeLinkName ? item.storeLinkName : '-',
            storePhone: item.storePhone ? item.storePhone : '-',
            goldNum: item.goldNum ? item.goldNum : '-',
            source: item.source ? item.source : '-', //单号
            department: item.department ? item.department : '-',
            distributor: item.distributor ? item.distributor : '-',
            region: item.region ? item.region : '-'
          }
        })
        this.goldPlus = data.goldPlus ? data.goldPlus : '0'
        this.goldMinus = data.goldMinus ? data.goldMinus : '0'
        this.totalGold = parseFloat(this.goldPlus) + parseFloat(this.goldMinus)
        this.totalCount = data.total ? data.total : '0'
        this.total = data.total
        this.list.status = 'pass'
        this.backTableTop()
      }).catch(() => {
        this.list.status = 'error'
      })
    },
    formatParam() {
      if (this.list.form.date[0] == '' && this.list.form.date[1] == '') {
        this.$Notice.warning({
          title: '请选择时间'
        })
        return false
      }
      this.list.status = 'pass'
      let param = {
        goldRecordTypeEnum: this.list.form.goldRecordTypeEnum,
        barCode: this.list.form.barCode,
        storeName: this.list.form.storeName,
        storeLinkName: this.list.form.storeLinkName,
        storePhone: this.list.form.storePhone,
        orderSn: this.list.form.orderSn
      }
      if (this.list.form.date[0] && this.list.form.date[1] && this.list.form.date.length === 2) {
        param.startTime = formatDate(this.list.form.date[0]) + ' 00:00:00'
        param.endTime = formatDate(this.list.form.date[1]) + ' 23:59:59'
      }
      param = clearEmpty(param)
      return param
    },
    onExport() {
      let v = this.formatParam();
      if (!v) return
      let param = {
        ...this.formatParam()
      }
      this.$jsonPost('/gold/record/export', param).then(res => {
        this.list.status = 'pass'
        this.$Modal.success({
          title: '导出成功',
          content: '请到首页-导出列表处下载',
          onOk: () => {
            this.$router.push('/home/export/list')
          }
        })
      }).catch(err => {
        this.list.status = 'pass'
      })
    },
    onNum(item) {
			this.$refs.numEdit.updateForm(item)
		},
    onPageChange(number) {
      this.list.currentPage = number
      this.$router.push({
        name: 'sales/gold/list',
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      })
      this.getData()
    },
    onPageSizeChange(pageSize) {
      this.list.currentPage = 1
      this.list.pageSize = pageSize
      this.$router.push({
        name: 'sales/gold/list',
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      })
      this.getData()
    }
  },
  watch: {
    $route() {
      let page = ~~this.$route.query.currentPage
      let table = this.list
      if (table.currentPage !== page) {
        table.currentPage = ~~this.$route.query.currentPage === 0 ? 1 : ~~this.$route.query.currentPage
        this.getData()
      }
    }
  }
}
</script>